<template>
	<view>
		<view style="display: flex; align-items: center; justify-content: center; background-color: #fff">
			<YanxueTab :list="tabList" @change="tabChange" :current="currentIndex"></YanxueTab>
		</view>
		<!-- <component :is="components[currentIndex]"></component> -->
		<pageYanxue ref="pageYanxueRef" v-if="currentIndex == 0"></pageYanxue>
		<pageTeach ref="pageTeachRef" v-if="currentIndex == 1"></pageTeach>
		<pageContest ref="pageContestRef" v-if="currentIndex == 2"></pageContest>
		<pageCultural ref="pageCulturalRef" v-if="currentIndex == 3"></pageCultural>
	</view>
</template>

<script>
import YanxueTab from '@/components/yanxue_tab'
import pageYanxue from '@/pagesA/yanxue/index.vue'
import pageTeach from '@/pagesA/teach/index.vue'
import pageContest from '@/pagesA/contest/index.vue'
import pageCultural from '@/pagesA/cultural/index.vue'
export default {
	components: {
		YanxueTab,
		pageYanxue,
		pageTeach,
		pageContest,
		pageCultural
	},
	data() {
		return {
			components: ['pageYanxue', 'pageTeach', 'pageContest', 'pageCultural'],
			currentIndex: 0,
			tabList: [
				{
					default: {
						title: '美院',
						icon: '/static/newicons/click_meiyuan.png',
						width: 70,
						height: 70
					},
					active: {
						title: '美院研学',
						// des: "近期12期",
						icon: '/static/newicons/click_meiyuan.png',
						width: 80,
						height: 80
					}
				},
				{
					default: {
						title: '美育',
						icon: '/static/newicons/click_huizong.png',
						width: 70,
						height: 70
					},
					active: {
						title: '美育研学',
						// des: "近期12期",
						icon: '/static/newicons/click_huizong.png',
						width: 80,
						height: 80
					}
				},
				{
					default: {
						title: '网课',
						icon: '/static/newicons/click_wangke.png',
						width: 70,
						height: 70
					},
					active: {
						title: '网课视频',
						// des: "近期12期",
						icon: '/static/newicons/click_wangke.png',
						width: 80,
						height: 80
					}
				},
				{
					default: {
						title: '文创',
						icon: '/static/newicons/click_wenchuang.png',
						width: 70,
						height: 70
					},
					active: {
						title: '文创产品',
						// des: "近期12期",
						icon: '/static/newicons/click_wenchuang.png',
						width: 80,
						height: 80
					}
				}
			]
		}
	},
	onLoad(options) {
		if (options.index) {
			this.currentIndex = +options.index
		}

		// 触发子组件的方法
		this.$nextTick(() => {
			let ref = [this.components[this.currentIndex]] + 'Ref'
			if (this.$refs[ref].init) {
				this.$refs[ref].init()
			}
		})
	},
	methods: {
		tabChange(index) {
			this.currentIndex = index
			// 触发子组件的方法
			this.$nextTick(() => {
				let ref = [this.components[this.currentIndex]] + 'Ref'
				if (this.$refs[ref].init) {
					this.$refs[ref].init()
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
page {
	overflow-x: hidden;
}
</style>
